<template>
	<view>
		<image class="cate-image" v-if="list.bgUrl == null" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/%E8%83%8C%E6%99%AF.png" mode=""></image>
		<image class="cate-image" v-else :src="list.bgUrl" mode="aspectFill"></image>
		<view class="actpmj">
			<image class="caty-vaterimg" v-if="list.avatarUrl == null" src="@/static/missing-face.png" mode=""></image>
			<image class="caty-vaterimg" v-else :src="list.avatarUrl" mode=""></image>
			<view class="acvpert">{{list.typeInfos[0].realName}}  <span class="caty-spamter">{{infotype}}</span></view>
			<van-button class="caty-unimpp" v-if="actye == false" icon="plus" round type="info" size="small" color="#ff7144"  @click="payto">关注</van-button>
			<van-button class="caty-unimpp" v-else round size="small" color="#d2d3d5" @click="unfollow">已关注</van-button>
			<view class="caty-titlke" v-if="list.typeInfos[0].desc == null">个人简介:营造每一寸属于自己的空间</view> 
			<view class="caty-titlke" v-else>个人简介:{{list.typeInfos[0].desc}}</view>
			       <view class="caty-opkyn"> 
			     <view class="caty-arrpes" v-for="(item, index) in list.articleList" :key="list.articleList">
					 <image class="caty-img" v-if="item.detailType == 'Json'" :src="item.images[0]" mode="" @click="aaact(index)"></image>
					 <img class="caty-img" v-else :src="item.extendData.thumbnailUrl" mode="" @click="actier(index)"></img>
					 <view class="caty-acvter">
						 <view style="margin-left: 20rpx;">{{item.title}}</view>
						 <image class="caty-asmage" v-if="list.avatarUrl == null" src="@/static/missing-face.png" mode=""></image> 
						 <image class="caty-asmage" v-else :src="list.avatarUrl" mode=""></image>
						 <span class="caty-afkoes">{{list.typeInfos[0].realName}}</span>
						 <span class="caty-iuroner">{{item.favorites}}</span>
						 <van-icon size="18" v-if="item.favoritesFlag == false" class="caty-icont" name="star-o" @click="aaaa(index)"/>
						 <van-icon size="18" v-else class="caty-icont" name="star" color="#ff7144" @click="aaaa(index)"/>
					 </view>
				  </view>
				</view>
		</view>  
		<van-button class="accbottom" type="primary" block @click="addinpy">下单</van-button>
	</view>
</template>
	 
<script>
	import use from '@/http/user.js'
	import Api from '@/http/api.js'
	import employeesConst from '@/employees/employees.js'
	const hireTypet = {} 
	employeesConst.hireTypecon.forEach((item) => {
	  hireTypet[item.type] = item.value;
	});
	export default{
		data(){
			return{
				datauser:'',
				actye:'',
				list:{},
				info:{
					cancel:"",
					articleId:''
				},
				infotype:''
			}
		},
		onLoad(){
			this.loagthe()
		},
		methods:{ 
			async loagthe(){
				var pages = getCurrentPages(); //获取加载的页面
				var currentPage = pages[pages.length - 1]; //获取当前页面的对象
				this.datauser = currentPage.options.id //当前页面url的参数  
				const res = await use.userinfo({userId:this.datauser})
				this.list = res.data
				this.infotype = hireTypet[this.list.typeInfos[0].type]
				this.loachedfg()
			},
			// 判断是否关注
			async loachedfg(){
					 // 评论关注判断
					 const reg = await Api.attention({userId:this.list.userId})
					this.actye = reg.data
			},          
			// 收藏
			async aaaa(index){
				this.info.articleId = this.list.articleList[index].articleId
				this.info.cancel = this.list.articleList[index].favoritesFlag
				const ress = await Api.collect(this.info)
				this.loagthe()
			},
			// 关注
			async payto(){
					 const reg = await Api.concern({userId:this.list.userId})
					 if(reg.code != "200"){
						 this.$api.msg("用户不存在");
					 }
					 this.loachedfg()
			},
			// 取消关注
			async unfollow(){
					 const reg = await Api.unfollow({userId:this.list.userId})
					 this.loachedfg()
			},
			// 跳转文章详细
			aaact(index){
				wx.getUserProfile({
				           desc: '用于完善用户信息',
				           success: (res) => {
						  uni.navigateTo({
						  	url: `/package/detail/detail?id=${this.list.articleList[index].articleId}&user=${this.list.userId}&userInfo=${res.userInfo.avatarUrl}`,
						  })
				           }
				   })
			},   
			// 跳转视频
			actier(index){
				wx.getUserProfile({
				           desc: '用于完善用户信息',
				           success: (res) => {
							   console.log(res)
						  uni.navigateTo({
						  	url: `/package/detail/video?id=${this.list.articleList[index].articleId}&user=${this.list.userId}&userInfo=${res.userInfo.avatarUrl}`,
						  })
				           }
				   })
			},
			// 下单
			addinpy(){
				uni.navigateTo({
					url: `/package/order/createOrder?data=${JSON.stringify(this.list)}`,
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.cate-image{
		width: 100%;
	}
	.actpmj{
		padding-bottom: 140rpx;
		background-color: #fff;
		transform: translateY(-3%);
		border-radius: 20px; 
		.caty-vaterimg {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			transform: translateY(-50%);
			margin-left: 30rpx;
			
		}
	}
	.acvpert{
      transform: translateY(-100%) !important; 
		margin-left: 30rpx;
		font-size: 40rpx;
        font-weight: 400;
	}
     .caty-spamter{
		 border-left: 1px solid #D9D9D9;
		 margin-left: 15rpx;
		 padding-left: 15rpx;
	 }
	.caty-unimpp{
		float: right;
		margin-right: 40rpx;
		transform: translateY(-155%) !important; 
	}
	.caty-titlke{
		font-size: 28rpx;
		margin-left: 30rpx;
		color: #1D1D1D;
	}
	.caty-opkyn{
		background-color: #f5f5f5;
	}
 .caty-arrpes{
	 padding: 0 30rpx;
	 margin-top: 35rpx;
 }
 .caty-img{
	 width: 100%;
	 border-top-left-radius: 20px;
	 border-top-right-radius: 20px;
 }
 .caty-acvter{
	 background-color: #fff;
	 border-bottom-right-radius: 20px;
	 border-bottom-left-radius: 20px;
 }
 .caty-asmage{
	 display: inline-block;
	 margin: 15rpx 15rpx 20rpx 20rpx;
	 width: 50rpx;
	 height: 50rpx;
	 border-radius: 50%;
 }
 .caty-afkoes{
	 display: inline-block;
	 transform: translateY(-15px);
	 font-size: 24rpx;
	 color: #a8a8a8;
 }
 .caty-iuroner{
 	 display: inline-block;
	 margin-right: 50rpx;
 	 float: right;
 	font-size: 24rpx;
 	color: #8a8a8a;
 }
 .caty-icont{
	 float: right;
	 margin-right: 5rpx;
 }
.van-button--primary{
	margin-left: 10%;
	position: fixed !important;
	bottom: 50rpx !important;
	width: 80% !important;
	border-radius: 20px !important;
	background-color: #ff7144 !important;
	border: 1px solid #ff7144 !important;
	color: #fff !important;
}
</style>